<template>
  <div class="commit">
    <mt-header title="评论" fixed>
      <router-link :to="path" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <a href="##" @click="show" slot="right" v-if="isShow">发表评论</a>
      <a href="##" @click="unShow" slot="right" v-else>取消评论</a>
    </mt-header>
    <div class="sub" v-show="isSubmit">
      <mt-field type="textarea" rows="4" v-model="content" placeholder="善言结善缘，恶语伤人心">
      </mt-field>
      <div>
        <mt-button type="primary" @click.native="submit" size="small">发布</mt-button>
        <mt-button type="default" @click.native="reset" size="small">重置</mt-button>
      </div>
    </div>
    <div class="list">
      <ul>
        <li v-for="(el, index) in commitArr" :key="index">
          {{ index + 1 }}---<span>{{ el.nickName }}</span>---<span>{{ el.data }}</span>
          <p>{{ el.content }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Qs from 'qs'
import { Toast } from "mint-ui";
export default {
  name: "commitCom",
  data() {
    return {
      path: '',
      isSubmit: false,
      content: '',
      userId: 0,
      isShow: true,
      artId: 0,
      commitArr: []
    }

  },
  mounted() {
    const userInfo = this.$store.state.userInfo;
    if (userInfo) {
      this.userId = userInfo.id;
      const id = this.$route.params.id;
      this.artId = id;
      const detailType = this.$route.params.detailType;
      if (detailType === 'detailArt') {
        this.path = '/detailArt/' + id;
      }
      this.showCommitList()
    } else {
      Toast('请先登录')
      Toast('请先登录')
      this.$store.state.homeIndex = 'home5';
      this.$router.replace('/home');

    }

  },
  methods: {
    show() {
      this.isSubmit = true,
        this.isShow = false
    },
    showCommitList() {
      this.$axios.get('getComment?artId=' + this.artId).then(rs => {
        this.commitArr = rs
      })
    },
    unShow() {
      this.isSubmit = false,
        this.isShow = true
    },
    submit() {
      const params = Qs.stringify({
        userId: this.userId,
        artId: this.artId,
        content: this.content
      });
      this.$axios.post('postComment1', params).then(rs => {
        Toast('发布成功！')
        console.log(rs);
        this.unShow()
        this.reset()
      })
      this.showCommitList()
    },
    reset() {
      this.content = ''
    }
  },
  components: {

  }
};
</script>

<style lang="less" scoped>
div.commit {


  a,
  a:visited {
    text-decoration: none;

    &:hover {
      color: rgb(217, 231, 231);
    }
  }

  .list {
    margin-top: 50px;

    ul {
      list-style: none;
    }
  }

  .sub {
    margin-top: 40px;
    padding: 5px;

    div {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;

    }
  }
}
</style>
